





Foreword. 


Our intentions when entering into the World 
of online accessibility were to contribute to 
a more inclusive Internet. Some people like 
to see a business case for investing any time 
or budget into accessibility. So, we have 
written this book as a way of demonstrating 
how much more effective a business 
website Is if it is Tully accessible. We hope 
you take the time to read It - because It will 
make a difference to more people than you 
might have first thought. 


Tom Lavis - Head of Communications, Huxley 
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Chapter One. 


What is accessibility? 





The official definition of ‘accessibility’ is a good starting point. Cambridge Dictionary says: 


The fact of being able to be reached or obtained easily 
and [he quality of being easy to understand 


04 


It’s clear to see why both of these definitions 
are imperative for any website. ‘Reached 

or obtained easily’ — yes, of course. 

If the website is not easily found, it is not 
easily visited. ‘The quality of being easy 

to understand’ — a website that doesn’t 
communicate properly will be ineffective. 


Let’s also set one thing straight here — when 
we talk about accessibility, we’re not only 
thinking about people with disabilities. We’re 
talking about anyone who encounters an Issue 
with accessibility — including environmental 


Real World vs 
Digital World 


When we look at accessibility in the ‘real 
World’, eg, town centres, a library or a bus, 
it’s incredibly easy to visualise accessibility 
features and issues, and therefore It’s 

easy to understand the impact. 


A bus without ample space means people 
with wheelchairs can’t get on. Aside from 
being unfair to people in wheelchairs, the 
bus will also suffer by losing out on the 
custom wheelchair users would bring them. 
The extra space needed not only benefits 
wheelchair users... everyone will benefit 
from and appreciate more room on the bus. 


Accessible design that benefits everyone Is 
known as ‘Universal Design’ — and is the 
underlying design philosophy when things 
like town centres, libraries and cinemas 
are built. If one person can not access and 
use a library, that design has failed. 


or technological issues (sun glare or dated 
browsers respectively, for example) as well as 
people with physical or cognitive disabilities. 


Someone who doesn’t have a permanent 
disability might find themselves temporarily 
impaired when, for example, using a 

screen in bright sunlight. Someone else 
might be trying to use a phone with one 
hand whilst holding a drink. A blind person 
might use voice control every day, whereas 
someone else who isn’t blind will use voice 
control to operate their Alexa or satnav. 


Understanding these things in the ‘real 
World’ is easy, but it’s not at all easy to 
define, spot and fix accessibility features 

and issues on a website. The most important 
thing initially is to understand that they 
absolutely do exist, and they are as important 
to understand and address as they are 
anywhere else. If one person can not use a 
website, has that design failed? We think so. 


Websites should be accessible for people 

with physical, cognitive, environmental or 
technological barriers. On a social level, we don’t 
need to question this, but to question why from a 
Strictly business perspective is understandable 
— and the answers are quite interesting. 


Let’s end this chapter with one thought. The 
Internet came along and offered independence 
to asection of society who desperately needed 
it. The ability to shop, socialise and work meant 
that those people could now contribute much 
more to, and feel more a part of society. If we 
create parts of the Internet that are inaccessible, 
we are blocking that opportunity unnecessarily, 
and not only at the cost of the website visitor. 
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Chapter Two. 


The business benefits 
of an accessible website. 


We can say with certainty that an 
accessible website will do more for your 
organisation than one that is not accessible. 
Some reasons are tangible, and some are 
intangible. Depending on what sort of 
business or organisation you are, one reason 
might 
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Better access 
means more 


people. 


mean a lot more to you than another. 

For example - an e-commerce business 

will find higher conversion rates appealing, 
whereas a large charity will need to add to 
their good reputation. An accessible website 
contributes to both of these, and more. 


1. Better Search Engine Optimisation 


A screen reader is a piece of assistive 
technology that reads out a web page, 
or screen, to anyone who wants to use it 
- mostly it’s people with impaired sight. 


There is a direct link between the way a screen 
reader can clearly communicate your web 
pages to you, and the strength of your SEO. 


HERE’S WHY 

In a nutshell, Google reads a web page the 
Same way a screen reader does. Pages with 
correctly structured code are easier for 
google bots to read, and so rank better In 
search results. It really is as simple as that. 


ALMOST EVERYONE HAS A SCREEN READER 
Whether they know it or not, most people 

will have access to a screen reader to test 
their own site out with. They are free, and 
easily installed into Some modern browsers, 
and already a feature on most smartphones 
and other browsers. For example, all 
Chromebook laptops will have it already 
installed - you just need to turn it on. 


Whilst most businesses are still catching up 
with making their websites accessible - the 
tech community at large have been making 
Sure people have the tools to access software, 
hardware the Internet for a long long time! 


2.Better communication means increased sales 


A more accessible website heightens user 
experience for everyone, regardless of 
potential accessibility issues. Eg, making 
the colour contrast on your website work 
for people with impaired sight makes it 
much easier for everyone to pick copy and 
design elements out on a page that is full 
of information. This better communication 
results in increased leads or sales. 


FACE TO FACE V’S WEBSITES 

The main reason for making sure a website 
communicates well is increased clarity for 
the user. Digesting information will be a lot 
more effortless for all website visitors. Good 


communication relies on clarity in all contexts. 


Let’s compare face to face communication 
with your website to see the examples clearly! 


e Form the words properly / correct spellings 


e Speak to the person in their language / 
written in a tone that is accessible to all 


e Don’t speak too quickly / allow the 
user enough time to read copy or 
digest images if using carousel 


e Support verbal communication with 
non-verbal communication / use an image 
or icon to support text where possible 


A great salesperson’s main weapon Is great 
communication. If your website needs to sell, 
it needs to be clear. Adhering to accessibility 
standards will make sure your website Is 
clear and easy to use for every person. 
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3.A website that works 
for users everywhere 


Accessibility issues don’t just relate to 
people with a disability. Environmental 
factors accounted for in accessible design 
can also make your website more effective 
for people ‘on the go’. Examples would be: 
in a library where volume has to be off, or in 
direct sunlight where contrast is an issue. 


Businesses invest a lot of money in making 
Sure their website or software Is designed 

in a way that allows it to look great for all 
devices including smartphones - so the logic 
that a user might be accessing their website 
‘on the go’ is well established amongst us. 


What if the website user on the bus struggles 
to use the website for other reasons? 


It might look fantastic on a phone Ina 
Shaded, still environment - but sun glare 


4.A competitive edge 


Businesses who have accessible websites 


have an advantage over businesses who don't. 


20% of the population in the UK are affected 
by a disability. That’s 13 million people, and 


they will prefer using your website over others. 


To add to that, almost every website user 
has experienced either environmental or 
technological accessibility issues when 
using the Internet. 


Making your website accessible will give your 
business a big competitive edge over those 
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or too much movement might mean that 
poor contrast, small buttons or frustrating 
navigation makes the website difficult to use. 


Ease of use is now a main priority for web 
users in the modern day. You may even 
recognise the impatience in yourself if one 
part of a website seems tricky to use, or loads 
Slowly. You probably won’t be shocked to 
hear that 50% of users will decide not to use 
a website at all if it is not mobile friendly. 





businesses who don’t see the point. Ensuring 
an extra 20% (not counting environmental 

or technological issues) of the population 
can use your website properly will clearly 

do wonders to your conversion rates. 


In the UK, the market of people with 
disabilities is known as The Purple Pound, 
and is estimated at £249 billion a year! 


The global estimate is put around 7 

trillion dollars. It’s easy to comprehend 
that people with disabilities will only shop 
online if the website they use is accessible 
for the person with their disability. 


9. Tested with 
real people 


When you follow accessibility standards, 

you have to design and test for everyone. 
Putting a website through proper user testing at 
several stages in the design and build process, 
without exception, improves the usability of 
awebsite. Testing against official standards 
means checking over the code structure and 
content quality. Everything is done properly 
when it’s designed to be accessible. 


Until you learn a bit about it, user testing might 
seem like an unnecessary, time consuming 
and expensive phase in a web build. In 

fact, it is the opposite in all three cases. 


5 1S ALL YOU NEED 

Most user testing experts will tell you that 
the magic number Is 5! And, According 
to Jeff Sauro of MeasuringU, 5 users will 
be able to find 85% of the problems on a 


website. measuringu.com/five-users 


YOU DON’T NEED A LAB 

We love to put forward the case for remote 
user testing. This means conducting the user 
testing online - either setting strict tasks a 
participant can follow without mediation, 
and using software to deliver video evidence 
afterwards, or using video call tools (Zoom 
etc) to guide the participant through tasks 
and recording the evidence as you go. 


However, there are some circumstances 
when user testing is best done face-to- 
face, like when conducting a focus group 
or if a participant needs extra help. 


Remote user testing means it can be done 
without leaving the office, using free tools, or 
some tools made specifically for remote user 
testing such as User Brain. userbrain.net 


This makes a user testing session something 
that can be done ina day, and with a 

Small budget. There Is also the simple fact 
that remote testing allows you to Include 
participants that might not live anywhere 
near the person carrying out the tests, so it 
becomes easier to find people who might be 
using a specific type of assistive technology. 





However, if the budget allows - we always 
prefer face to face user testing, So some 
behaviours are more easily observed. 


When user testing specifically for accessibility, 
it becomes a little more specialised. Websites 
need to be tested by people who use assistive 
technologies, and often the sessions need to 
be mediated In person. It is possible to recruit 
accessibility participants by using agencies 
such as ‘people for research’ who usually 
have a small pool of ‘accessibility candidates’ 
they will give you access to for a fee. 


We have grown our own list, 
by forming partnerships with 
local charities and paying 
their service users to run tests 
for us. We also donate money 
to the charity per session too. 
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6. The BEST marketing 


Doing a ‘good thing’ is unarguably good 
anyway, of course, but reputationally — it’s 
fantastic for business. Shouting about your 
accessible website is great marketing, 
amazing content for award entries, and 
nice to speak about at networking events! 


It is recognised that being a positive and 
progressive organisation Is fantastic for 
business in the modern day. Certifications 
such as B Corps bcorporation.net award 
can showcase businesses that are ‘building 
a sustainable and inclusive economy that 
works for everyone’. 
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A great asset to have when looking to 
win prestigious certifications such as 
this one is a fully accessible website - 
which demonstrates a genuine sense of 
Corporate Social Responsibility (CSR). 


Just a quick search online can bring up 
dozens of notable awards being handed 
out for CRS around the World. 


awards-list.co.uk/ uk-awards/corporate- 
social-responsibility-csr-awards 


“Many organisations are 
waking up to the fact that 
embracing accessibility 
leads to multiple benefits 
— reducing legal risks, 
strengthening brand 
presence, improving 
customer experience and 
colleague productivity.” 


Paul Smyth 
Head of Digital Accessibility, Barclays 





THE B CORP 
DECLARATION OF 
INTERDEPENDENCE 


We envision a global economy that uses business as a force for good. 
This economy is comprised of a new type of corporation 

- the B Corporation - Which is purpose-driven and creates 

benefit for all stakeholders, not just shareholders. 

As B Corporations and leaders of this emerging economy, we believe: 


e That we must be the change we seek tn the world. 


e That all business ought to be conducted as if people 
and place mattered. 


e That, through their products, practices, and profits, businesses 
should aspire to do no harm and benefit all. 


e Jodo so requires that we act with the understanding that we 
are each dependent upon another and thus responsible for 
each other and future generations. 


Chapter Three. 


What exactly are 
we looking for in an 
accessible website? 
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This is something we're asked a lot. 
There are a lot of technicalities in the makeup of a website, of course, and they can all be 
designed well or badly. Building a website properly means It is accessible. Building it badly 


means it’s not accessible. Below are some examples of common issues we encounter. 
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COLOUR CONTRAST 
Light grey font on top of a white background, for example, Is hard to read. 


Certain combinations of colour (reds and greens most commonly) will be challenging 
for people with colorblindness - which affects 4.5% of the population. 


Font size falls into this category. Small font sizes are hard to read. 


STRUCTURE 

A page should be given a structure in terms of text headings and content 
— each piece of copy should be labeled with a tag that represents its place 
in the hierarchy of content. The main page title would be hl, the next one 
down would be 2h, sub-headers beneath that would be h3, h4 etc. 
Navigation should be properly labelled. 


HTML code can be semantic, so the code itself (and not the 
content) conveys the purpose of that part of the page. 


CONTENT 

Images should be assigned some ‘alternative text’ that explains what a picture 
represents and Is read out to people by screen readers, or displayed in the case 
of images not loading. Alternative text should not only be present, but helpful. 


Copy should be written in a way that Is not too difficult to understand. 


UX copy (for example, the words on a button like ‘sign up’ or ‘send’) 
should be carefully considered to support the context. 


An ‘ARIA’ (Accessible Rich Internet Applications Suite) role, state or property should 
be included in the code to further help people who use assistive technologies. 


Image sizes should be optimised so pages don’t load 
Slowly and make scrolling a frustrating task. 


Chapter Four. 


Easy ways you can 
check how accessible 


your website is. 





1. WAVE Runner 


A tool well used by developers who build 
websites for everyone is WAVE — which means 
Web Accessibility Evaluation Tool. It gives 
instant feedback on your website content’s 
accessibility, and is free to use for anyone, 
without even having to sign up for a trial or 
registering as a user. You don’t need to be 
technically minded to realise how it works. 


Follow these steps: 


1. Goto www.wave.webaim.org 


2. Paste your URL into the search 
bar on the WAVE website. 


3. Redand Yellow markers show 
you where any issues are. 


4. Ask your marketing team for 
a review of these findings. 


2. Contrast Checker 


When thinking about colour and 
contrast, some very basic fundamentals 
of design seem to have been lost 

when we look at some websites. 


We can all guess that black copy on a white 
background Is going to be easy to read, but 
animated copy over a detailed image would 
be hard to read. If we go a layer further and 


Start to look at the colours we’re using, we can 
find out that a website we assume to be fine 
can actually cause problems for some people. 


A ‘Contrast Ratio’ is ratio of the difference 
in luminescence between two adjacent 
colours (like background and foreground). 


You can use a free online tool that can give 
you an Official rating, called a WCAG (Web 
Content Accessibility Guidelines) rating. 


WCAG minimum contrast standards require 
the visual presentation of text and images 
of text to have a contrast ratio of at least 
4.5:1. Large scale text must have a contrast 
ratio of at least 3:1. 


3.Screen Readers 


See how a screen reader makes sense of your 
own website by putting it to the test. Most 
people use Chrome as their web browser, so 
let’s use that as the example. Simply go here 
and press ‘add to Chrome’. www.chrome. 
google.com/webstore/detail/chromevox- 
classic-extensi/kgejg|hpjiefopelomljgicjbhoiplfn 


Once installed, go to your website and listen! 
To some extent, you are now experiencing your 
website like a lot of other real users would. 
Although we can never fully replicate the 
experience of others - it does help to develop 
some empathy for other users. Are you happy 
with the interpretation? Is Google? 


Chapter Five. 


How to make an 
accessible website. 
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Accessibility needs to be rooted in project processes rather 
than something that is tacked on depending on budget. 


You might think that the most important thing you need in order to achieve accessibility is a 
savvy developer who knows how to code accessible websites, but this is not the case. Every 
decision that has been made to improve website accessibility has resulted from collaboration 
between a diverse set of users and designers. At the heart of accessibility is a need to make things 
inclusive. The most successful design teams in the World benefit from a diverse design team. 
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Learning - experience 


There are a lot of resources online and in print 
that offer a huge amount of insight into the 
world of accessibility. We ask our team here 

to read specific books that we look up to as 

the modern bibles of accessible design. For 
example, ‘Accessibility for Everyone’ by Laura 
Kalbag and ‘Just Ask’ by Shawn Lawton Henry 
are two books on the Huxley reading list for all 
employees who are trusted to lead projects or 
be the design or development lead on a project. 


But ‘knowing about’ accessible design 
requires more than book learning. A designer 
or design team needs to realise the full context 
to be able to design something truly inclusive, 
and a few things can help with this. 


e Volunteering has been a good way for some 
of our team to pick up first hand experience. 
There are charities who do lots of work for 
an inclusive Internet, which means making 
Sure people have access to the internet 
and know how to use It. A demographic 
that these charities work with a lot are older 
people who experienced the digital wave 
later in life. They depend on volunteers who 
can go to people’s houses and help them 
use a computer (or any other device). 


e User testing, aside from being part of 
the design process, Is also a great way of 
regularly experiencing accessibility issues 
for all users. Someone who’s experienced in 
user testing will have a very well developed 
sense of empathy for website users. 


Learning - code 


Aside from books and experiences, the people 
responsible for the design and development 
of a website need to learn how to code 
accessible websites. The best way to go 

about this is to follow WCAG 2.1 guidelines 
closely. These guidelines tell you what the 
developer needs to do to ensure compliance. 


Complying to WCAG 2.1 will usually 
also help ensure you are confirming 
to more local standards, like the NHS 
Accessible Information Standard or 
the new Government guidelines. 


Learning about ARIA labels, for example, 

will go a long way In turning a developer into 

a developer for accessibility. These labels 
attach to HTML code to ‘name’ elements of a 
website, for example a form - so when a user 
is using a screen reader, for example, it will let 
them know It Is a form. 


When a developer gets used 
to designing for accessibility, 
they will recognise that It is 
the perfect way to ensure 
good, clean code that 
benefits the website and 
user In a host of ways, as 
previously mentioned. 


Diverse design teams 


We can not make something truly accessible If 
the design process Is not accessible. Ensuring 
our processes are accessible to everyone means 
we are benefitting from more varied input. 

For example, a design workshop that relies 
solely on people standing up and presenting 

to people will be living hell for someone with 
autism. Using a white board and post-it notes 

is not accessible for someone who is blind. 


When processes are accessible, we benefit 
from a diverse design team. For example, 
when we build a website, we collaborate 
with people with physical and cognitive 
accessibility issues at the wireframing, 
prototype and soft launch phases. 


It’s also important to consider (and 

aim for) diversity in gender, ethnicity, 
race, age, socioeconomic status and 
geographical area. We can call this ‘co- 
design’, designing ‘collectively’, and 
‘designing with people — not for people’. 


It’s important to state that people don’t have 
to be permanent members of staff to be part 
of ateam. Someone with a small agency of 


2 or 3 people will need to bring other people 
in depending on the project. Making sure your 
user testing candidates are diverse Is a great 
way of bulking up your diverse design team, 
at no extra cost! 


The design process 


As l|’ve said before - accessibility is 
all about considering the user. 


There are processes we use early on in 
a project that help us to define who the 
audience will be for a website, and what 
they want to achieve when they’re there. 


We speculate a lot during these processes, 
and so the diverse team we have built helps 
to minimise risk in our assumptions. Only 
later on when we can test our ideas do we 
learn how much we need to straighten up. 


Empathy Mapping 


Whenever we Say ‘empathy mapping’ to a 
client or prospect, we always follow up with 
the recognition that it most certainly is an 
industry phrase, but we can’t seem to shake 
it - because It’s exactly what this process Is. 


Collaborating with stakeholders, we define 
who we think the separate audience groups 
are. For example, the Kellogs website might 
be visited by wholesalers, independent store 
owners, Customers, journalists etc. 

Once we’ve defined those groups, we 
attempt to define the following for each. 


TASKS 

What tasks are users trying to complete? 
What questions do they need answered? 
FEELINGS 

How Is the user feeling about the experience? 
What really matters to them? 

PAIN POINTS 

What pain points might the user be experiencing? 
What do they need to overcome? 

ULTIMATE GOALS 

What Is the user’s ultimate goal? 

What are they trying to achieve? 
INFLUENCES 


What people, things or places may influence how the user acts? 


After this workshop, we should end up with an agreed understanding of who the main user 
groups are, and what they want to achieve. Of course, concluding this is all well and good - but 
the next phase of our process is where we start to see how this directly affects the website build. 


Collaboration 


The real strength of working with a team 
of people comes from collaboration. We 
made a simple venn diagram to show 
the different groups and some instances 
where they collaborate during a project. 


There are three main groups: The Client, 
Us, The Users. At some point, we should 
all communicate with each other during 


a project. In a process that results in 
accessible design, there is no one group who 
thinks they know any more than another. 
We are designing for The User, so if any 
group’s voice needs to be heard above all 
others - it’s that one. There are still a lot 
of businesses who get their new website 
done without consulting their website 
users. [hey might end up with a website 
that the client is happy with - but nobody 
will know for sure how effective it really is. 


User Testing in QA 


User Testing in Design 





Discovery Workshop 
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User Research 


Three key moments of collaboration: 


SCOPING - Client and User 

To create a scope, the client needs to 
understand the problem. In order to do this, 
they need information from their website users 
(or customers). They also need to collect as 
much information from inside their business 
too. It’s good to analyse website analytics data, 
send out customer surveys, conduct customer 
focus groups, and hold internal meetings 

in order to create a well informed scope. 


Discovery Workshops - Client and Us 

We don’t take on a project if it doesn’t 
include a full discovery phase. The empathy 
mapping and user journey tasks go on to 
inform our sitemap and wireframes, which 
make up the bones of the entire website. 


User testing - User and Us 

Stakeholders can observe if they wish, but 
user testing is our opportunity to test our work 
with the people who we’re designing for. 


Considering you 


As an agency who built websites for 
businesses, we recognise that if the back-end 
of the website is difficult to use or unfamiliar 
to the admin, they might not be able to 
continue to create content that is accessible. 


For example, a popular Wordpress 

plugin for SEO assistance called Yoast is 
something we install as standard - it does 
a good job in guiding the website admin 
through the process of making content 
that achieves good SEO. In doing this, 
they are also making it accessible. 





| speak about guidelines in a moment, but one 
set of guidelines relevant to this section are the 
ATAG standards, which stands for Authoring 
Tool Accessibility Guidelines. These are for 
people like us, who build out custom elements 
ina CMS and follow guidelines to reach a 

AAA standard so the admin experiences 

good accessibility when authoring content. 
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Guidelines 


WCAG 2.1 is created by WSC and is the official 
global guidelines for online accessibility. 

The lowest a website can achieve and 

still be compliant is ‘A’ standard, with the 
highest being ‘AAA’. Most organisations will 

be happy to achieve the ‘AA’ standard. 


The ‘Public Sector Bodies (Websites and 
Mobile Applications) Accessibility Regulations 
2018’ is specifically for public body 
organisations, and requests that the websites 
achieve WCAG 2.1 standards and include 

an accessibility policy on their website. 
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Chapter Six. 


How to fix a website 
that is not accessible. 





70% of websites are not accessible. 
They may as well be kids toys. 
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Once you’ve done the tests to see how accessible 
the website is, you might be left with the responsibility 
of doing something about it. 


Tools like WAVE Runner can highlight issues, make sure the website passes the WCAG 
explain why it is inaccessible and then point 2.1 guidelines. But if you want to ensure it 
you to the official WCAG guideline - but you’ll __ is fully accessible, you’ll want to run some 
need to find someone who can make the accessibility user testing once the technical 
technical changes for you. But you then need WCAG 2.1 standards have been met. 
someone to help you make those changes. 

Following the below steps should help you 
Your current developer or development team ensure you're doing the right things on your 
Should be happy to use WAVE as a tool to journey to a more accessible website: 


Check to see how accessible the website is, using the desk based methods 


: we mentioned earlier - WAVE, Contrast Checker, using a Screen Reader. 
9 Ask your developer or development team if they can fix 
any issues raised by your own desk based auditing. 
User-test the website with an ‘accessibility’ pool of users, 
3 
and ask your design team to observe the sessions remotely. 
A Make sure any issues raised by the user-testing 


sessions are fixed by your design team. 


Best practice is to make testing part of your ongoing schedule. Desk based testing Is So easy 
to do that it should be set as a reminder to yourself once a month. Your marketing teams 
might be adding new website content every day, so your desk based results using WAVE 
might be different every time. 
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To summarise 


When we started to use ‘accessibility’ as a design blueprint at Huxley, our work improved. 


Our clients benefited financially by growing at their desired rate, 
and saving money long term on website maintenance. 


We now build accessible websites for a variety of clients including local authorities, 
government departments, and large media companies. 


We can guarantee that by doing the good thing of making your website easily accessible 


to everyone, you’ll be making a smart business decision that you’ll continue to benefit 
from again and again. 


Email us now to book In a video call, 
and we'll take a look at your website. 


tom@huxleydigital.co.uk 


24 


t: 01903 896624 
e: hello@huxleydigital.co.uk 


OF 





